layui.use(['table', 'form', 'element'], function(){
    var form = layui.form, table = layui.table, element = layui.element;
    const titleDom = document.querySelector(".layui-tab-title");
    const optionDom = document.querySelector(".layui-tab-content");
    $.ajax({
        url: "/question/queryAllQuestion",
        data: {},
        dataType: "JSON",
        type: "GET",
        //返回的数据dataJSON格式
        success: function (data) {
            sessionStorage.setItem("tabNum", 1);
            let titleStr = '';
            let optionStr = '';
            data = data.data;
            let titleNum = data.length;
            for(let i=0; i<data.length; i++){
                if (i==0){
                    titleStr = titleStr + `<li class="layui-this undo" id="${i+1}" lay-id="${i+1}">${i+1}</li>`;
                    optionStr = optionStr + '<div class="layui-tab-item layui-show">';
                }else{
                    titleStr = titleStr + `<li class="undo" id="${i+1}" lay-id="${i+1}">${i+1}</li>`;
                    optionStr = optionStr + '<div class="layui-tab-item">';
                }

                optionStr = optionStr + `
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <p>${data[i].question}</p>
                                <input type='radio' data-id="${i+1}" name="${data[i].id}" value='A' lay-filter="radioOpt" title='${data[i].optionA.replace(/\n/g, "<br>")}'><br>
                                <input type='radio' data-id="${i+1}" name="${data[i].id}" value='B' lay-filter="radioOpt" title='${data[i].optionB.replace(/\n/g, "<br>")}'><br>
                                <input type='radio' data-id="${i+1}" name="${data[i].id}" value='C' lay-filter="radioOpt" title='${data[i].optionC.replace(/\n/g, "<br>")}'><br>
                                <input type='radio' data-id="${i+1}" name="${data[i].id}" value='D' lay-filter="radioOpt" title='${data[i].optionD.replace(/\n/g, "<br>")}'><br>
                            </div>
                        </div>
                        </div>
                    `;
            }

            titleDom.innerHTML = titleStr;
            optionDom.innerHTML = optionStr;
            form.render();
            element.render();

            let map = new Map();
            //此处即为 radio 的监听事件
            form.on('radio(radioOpt)', function(data){
                let liId = data.elem.getAttribute("data-id");
                map.set(data.elem.name, data.value);
                let percent = (map.size / titleNum) * 100;
                element.progress('demo', percent.toFixed(2) + "%");
                $('#'+liId).removeClass("undo");
                nextTab();
                if(percent >= 100){
                    $('#submitBtn').css("display", "block");
                }
            });

            //触发事件
            var active = {
                tabBack: function(){
                    //切换到指定Tab项
                    backTab();
                },
                tabForward: function () {
                    nextTab();
                }
            };

            function backTab() {
                let tabNum = sessionStorage.getItem("tabNum");
                if(tabNum > 1){
                    tabNum = tabNum - 1;
                    sessionStorage.setItem("tabNum", tabNum);
                    element.tabChange('docDemoTabBrief', tabNum);
                }
            }

            function nextTab() {
                let tabNum = sessionStorage.getItem("tabNum");
                if(tabNum < titleNum){
                    tabNum = Number(tabNum) + 1;
                    sessionStorage.setItem("tabNum", tabNum);
                    element.tabChange('docDemoTabBrief', tabNum);
                }
            }

            $('.site-demo-active').on('click', function(){
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            $(".layui-tab-title li").click(function () {
                var tabNum = $(this).index() + 1;
                sessionStorage.setItem("tabNum", tabNum);
            });

            //监听提交
            form.on('submit(submit)', function(data){
                let subData = data.field;
                if (Object.keys(subData).length == titleNum){
                    $.ajax({
                        url: "/result/score",
                        data: JSON.stringify(subData),
                        type: "post",
                        async: false,
                        contentType: 'application/json;charset=UTF-8',
                        success: function (ret){
                            let d = ret.data;
                            let superiority = d.character.superiority;
                            superiority = superiority.replace(/\n/g, "<br>&emsp;&emsp;");
                            superiority = superiority.replace("作为个体", "<span>作为个体</span>");
                            superiority = superiority.replace("沟通特点", "<span>沟通特点</span>");
                            superiority = superiority.replace("作为朋友", "<span>作为朋友</span>");
                            superiority = superiority.replace("对待工作和事业", "<span>对待工作和事业</span>");
                            let over = d.character.over;
                            over = over.replace(/\n/g, "<br>&emsp;&emsp;");
                            over = over.replace("作为个体", "<span>作为个体</span>");
                            over = over.replace("沟通特点", "<span>沟通特点</span>");
                            over = over.replace("作为朋友", "<span>作为朋友</span>");
                            over = over.replace("对待工作和事业", "<span>对待工作和事业</span>");
                            let hue = d.character.hue;
                            let ch = '';
                            if (hue == "红色"){
                                ch = "red-hue";
                            }else if(hue == "黄色"){
                                ch = "yellow-hue";
                            }else if(hue == "蓝色"){
                                ch = "blue-hue";
                            }else{
                                ch = "green-hue";
                            }
                            //示范一个公告层
                            layer.open({
                                type: 1
                                ,title: false //不显示标题栏
                                ,closeBtn: false
                                ,area: ['800px', '630px']
                                ,shade: 0.8
                                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                                ,btn: ['知晓']
                                ,btnAlign: 'c'
                                ,moveType: 1 //拖拽模式，0或者1
                                ,content: `
                                            <div>
                                                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                                                    <ul class="layui-tab-title">
                                                        <li class="layui-this result-li">性格颜色</li>
                                                        <li class="result-li">详细介绍</li>
                                                    </ul>
                                                    <div class="layui-tab-content">
                                                        <div class="layui-tab-item layui-show">
                                                            <div class="character-intro">
                                                                <p>您的性格颜色为：<span class="${ch}">${d.character.hue}</span></p>
                                                                <p>${d.character.intro.replace(/\n/g, "<br>")}</p>
                                                            </div>
                                                        </div>
                                                        <div class="layui-tab-item">
                                                            <div class="character-detail">
                                                                <div>
                                                                    <p>性格优势</p>
                                                                    <p>&emsp;&emsp;${superiority}</p>
                                                                </div>
                                                                <div>
                                                                    <p>性格过度</p>
                                                                    <p>&emsp;&emsp;${over}</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        `
                                ,success: function(layero){
                                    var btn = layero.find('.layui-layer-btn');
                                    btn.find('.layui-layer-btn0').attr({
                                        href: '/toIndex'
                                    });
                                }
                            });
                        }
                    });
                }else{
                    layer.confirm('还有题目未做完', function (i) {
                        layer.close(i);
                    });
                }

                return false;
            });
        }
    });
});